<template lang='pug'>
  van-swipe.bg-img-h(@change="onChange" :autoplay="5000" :show-indicators="showIndicator")
    van-swipe-item.background-img(
      v-for="image, index in images" 
      :key="index" v-lazy:background-image="image" 
      @click.native="imagePreview(index)"
      )
    div(
      class="van-custom-indicator" 
      slot="indicator" 
      v-show="images.length" 
      v-if="showIndicator"
      :class="indicatorPosition"
      ) {{ current + 1 }}/{{images.length}}
</template>

<script type='text/ecmascript-6'>
  import { ImagePreview } from 'vant'

  export default {
    props: {
      images: Array,
      showIndicator: {
        type: Boolean,
        default: true,
      },
      indicatorPosition: {
        type: String,
        default: 'right',
      },
      showImagePreview: {
        type: Boolean,
        default: true,
      },
    },
    data () {
      return {
        current: 0,
      }
    },
    methods: {
      imagePreview(index) {
        if (!this.showImagePreview) return
        ImagePreview({
          images: this.images,
          startPosition: index,
          onClose() {
            // do something
          }
        });
      },
      onChange(index) {
        this.current = index;
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'

.van-custom-indicator
  position absolute
  bottom 1rem
  color $color-white
  background-color rgba(0,0,0,.5)
  width 3.5rem
  height 3.5rem
  border-radius 50%
  text-align center
  line-height 3.5rem
  letter-spacing 2px
  &.left
    left 1rem
  &.right
    right 1rem
</style>
